<template>
  <!--  <router-view/>-->
  <div style="background-color: #f5f5f6;">
    <a href="?id=1" style="text-decoration: none;">我要卖房</a>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <a href="?id=0" style="text-decoration: none;">我要出租</a>
  </div>

  <div v-show="id==0 || id==null">
    <div style="background-color: #f5f5f6;width:100%;height: 200px;">

      <h1 style="font-size: 33px;margin: 0 auto;padding-top: 50px">发布出租房源</h1>
      <p style="margin-top:15px;color: #878787">数万线下门店 · 快速全城推广 · 专业经纪人服务</p>
    </div>

    <div style="margin: 0 auto ;width:550px">
      <el-form label-width="138px" style="width: 580px;color:#101d37;" class="inputDeep">
        <el-form-item label="小区所在城市" style="margin-top: 20px;">
          <el-input placeholder="请输入城市的完整名称"></el-input>

        </el-form-item>
        <hr>
        <el-form-item label="小区" style="margin-top: 20px;">
          <el-input placeholder="楼栋号" style="width: 130px;"></el-input>
          <el-input placeholder="单元号" style="width: 130px;"></el-input>
          <el-input placeholder="门牌号" style="width: 130px;"></el-input>
        </el-form-item>
        <hr>
        <el-form-item label="房屋地址" style="margin-top: 20px">
          <el-input placeholder="请输入房屋具体地址"></el-input>
        </el-form-item>
        <hr>
        <el-form-item label="期望租金" style="margin-top: 20px">
          <el-input placeholder="请输入您期望租出的价格" style="width: 200px;"></el-input>
          <p style="margin: 0;font-weight: 700;color: #101d37">元/月</p>
        </el-form-item>
        <hr>
        <el-form-item label="出租方式" style="margin-top: 20px">
          <el-select v-model="RentalMethodArr" placeholder="请选择" style="width:100px;" suffix-icon="">
            <el-option label="整租" value="整租"></el-option>
            <el-option label="合租" value="合租"></el-option>
          </el-select>
        </el-form-item>
        <hr>
        <el-form-item label="是否有意向托管房屋" style="margin-top: 20px">
          <el-select v-model="trusteeshipArr" placeholder="请选择" style="width:100px;" suffix-icon="">
            <el-option label="是" value="是"></el-option>
            <el-option label="否" value="否"></el-option>
          </el-select>
          <text style="margin: 0;font-size: 12px">平台定期支付租金，专属管家打理房屋，收益稳定。</text>
        </el-form-item>
        <hr>
        <el-form-item label="称呼" style="margin-top: 20px">
          <el-input placeholder="我们应该如何称呼您"></el-input>
        </el-form-item>
        <hr>
        <el-form-item label="手机号码" style="margin-top: 20px">
          <el-input placeholder="您的联系方式，方便我们及时与您联系"></el-input>
        </el-form-item>
        <hr>
        <p style="color:#9399a5;width: 590px;margin: 30px auto 0;line-height: 20px;font-size: 14px">
          提示：您点击“提交委托”后，若您的房源通过平台初步审核，将会由Home1ess经纪人和您取得联系，并对您的房源进行再次核实，核实无误后将与您建立服务关系。Home1ess平台仅提供信息展示和网络技术服务。</p>
        <el-form-item>
          <el-button type="primary" style="width: 190px;height: 55px;margin:50px 0 0 50px;font-size: 18px"
                     @click="initValidate">提交委托
          </el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>

  <div v-show="id==1">
    <div style="background-color: #f5f5f6;width:100%;height: 200px;">

      <h1 style="font-size: 33px;margin: 0 auto;padding-top: 50px">发布出售房源</h1>
      <p style="margin-top:15px;color: #878787">数万线下门店 · 快速全城推广 · 专业经纪人服务</p>
    </div>
    <div style="margin: 0 auto ;width:550px">
      <el-form label-width="138px" style="width: 580px;color:#101d37;" class="inputDeep">
        <el-form-item label="小区所在城市" style="margin-top: 20px;">
          <el-input placeholder="请输入城市的完整名称"></el-input>

        </el-form-item>
        <hr>
        <el-form-item label="小区" style="margin-top: 20px;">
          <el-input placeholder="楼栋号" style="width: 130px;"></el-input>
          <el-input placeholder="单元号" style="width: 130px;"></el-input>
          <el-input placeholder="门牌号" style="width: 130px;"></el-input>
        </el-form-item>
        <hr>
        <el-form-item label="房屋地址" style="margin-top: 20px">
          <el-input placeholder="请输入房屋具体地址"></el-input>
        </el-form-item>
        <hr>
        <el-form-item label="期望售价" style="margin-top: 20px">
          <el-input placeholder="请输入您期望卖出的价格" style="width: 200px;"></el-input>
          <p style="margin: 0;font-weight: 700;color: #101d37">万元</p>
        </el-form-item>
        <hr>

        <el-form-item label="称呼" style="margin-top: 20px">
          <el-input placeholder="我们应该如何称呼您"></el-input>
        </el-form-item>
        <hr>
        <el-form-item label="手机号码" style="margin-top: 20px">
          <el-input placeholder="您的联系方式，方便我们及时与您联系"></el-input>
        </el-form-item>
        <hr>
        <p style="color:#9399a5;width: 590px;margin: 30px auto 0;line-height: 20px;font-size: 14px">
          您点击“确认发布”后，若您的房源通过初步审核，将会由Home1ess经纪人和您取得联系，并对您的房源进行再次核实，核实无误后将与您建立服务关系。Home1ess平台仅提供信息展示和网络技术服务。</p>
        <el-form-item>
          <el-button type="primary" style="width: 190px;height: 55px;margin:50px 0 0 50px;font-size: 18px" @click="initValidate">确认发布
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>


</template>

<script setup>
import {ref} from 'vue'
import {ElMessage} from 'element-plus'
import '../../../public/gt.js'

const RentalMethodArr = ref("");
const trusteeshipArr = ref("");
const id = new URLSearchParams(location.search).get('id');

const initValidate = async () => {
  let getValidateURL = "http://192.168.0.100:6060/validation/register"
  let getValidateOptions = {method: 'GET'}
  let getValidateData = await fetch(getValidateURL, getValidateOptions)
  getValidateData = await getValidateData.json()
  console.log(getValidateData)
  if (getValidateData.code == 20001) {
    console.log("Captcha Init")
    initGeetest({
      gt: getValidateData.data.gt,
      challenge: getValidateData.data.challenge,
      new_captcha: getValidateData.data.new_captcha,
      offline: false,
      product: "bind",
      width: "100%",
      lang: "en"
    }, function (captchaObj) {
      captchaObj.onReady(function () {
        console.log("Captcha Ready")
        captchaObj.verify();
      }).onSuccess(async function () {
        let getValidateURL = "http://192.168.0.100:6060/validation/validate"
        let getValidateOptions = {
          method: 'POST',
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            "challenge": captchaObj.getValidate().geetest_challenge,
            "validate": captchaObj.getValidate().geetest_validate,
            "seccode": captchaObj.getValidate().geetest_seccode,
            "data": null
          })
        }
        let getValidateData = await fetch(getValidateURL, getValidateOptions)
        getValidateData = await getValidateData.json()
        if(getValidateData.code == 20001) {
          ElMessage.success("提交成功")
        } else {
          ElMessage.error("提交失败")
        }
      });
    });
  }
}
</script>

<style scoped>
.inputDeep /deep/ .el-input__wrapper {
  box-shadow: none;
}

.inputDeep /deep/ .el-select__wrapper {
  box-shadow: none;
}

.inputDeep /deep/ .el-form-item__label {
  justify-content: left;
  color: #101d37;
  font-weight: 700;
}
</style>